<template>
	<view class="contain">
			<u--form labelPosition="left" label-width="90px" :rules="rules" ref="uForm" >
				<u-form-item label="预约课程"  prop="apply.course" borderBottom ref="item1">
					<view class="flex justify-start" @click="showCourse">
						<view><u--input v-model="apply.course" disabled disabledColor="#ffffff" placeholder="选择预约的课程" border="none"></u--input></view>
						<view class="relative top-[5px] right-[50px]"><u-icon slot="right" name="arrow-down"></u-icon></view>						
					</view>
				</u-form-item>
				<u-form-item label="姓名" borderBottom ref="item1">
					<view class="flex justify-start">
						<view><u--input v-model="apply.name" placeholder="输入姓名" border="none" maxlength="20"></u--input></view>
						<view class="relative top-[5px]"><!-- <u-icon slot="right" name="arrow-right"></u-icon> --></view>						
					</view>
				</u-form-item>
				<u-form-item label="年龄" borderBottom ref="item1" maxlength="2">
					<view class="flex justify-start">
						<view><u--input type="number" v-model="apply.age" placeholder="输入年龄" border="none" maxlength="2"></u--input></view>
						<view class="relative top-[5px]"><!-- <u-icon slot="right" name="arrow-right"></u-icon> --></view>						
					</view>
				</u-form-item>
				<u-form-item label="手机号码" borderBottom ref="item1">
					<view class="flex justify-start">
						<view><u--input type="number" v-model="apply.phone" placeholder="输入预约的手机号" border="none" maxlength="11"></u--input></view>
						<view class="relative top-[5px]"><!-- <u-icon slot="right" name="arrow-right"></u-icon> --></view>						
					</view>
				</u-form-item>
				<!-- <u-form-item label="预约时间" borderBottom ref="item1">
					<view class="flex justify-start" @click="showTime">
						<view><u--input v-model="apply.time" disabled disabledColor="#ffffff" placeholder="选择预约时间" border="none"></u--input></view>
						<view class="relative top-[5px]"><u-icon slot="right" name="arrow-right"></u-icon></view>						
					</view>
				</u-form-item> -->
			</u--form>
			
			<view class="mt-8">
				<!-- <view class="submit" @submit.prevent="submitinfo">提交</view> -->
				<u-button type="primary" @click="submitinfo" text="确定"></u-button>
			</view>
			
			<!-- <u-action-sheet :actions="coursesList.data" @select="selectClick" :show="cshow" title="选择课程"></u-action-sheet> -->

			<!-- 时间组件 -->
			<u-datetime-picker
				:show="show"
				v-model="value1"
				:minDate="new Date().getTime()"
				mode="datetime" :closeOnClickOverlay="true" 
				@close="closePicker" 
				@confirm="confirmPicker"
				@cancel="cancelPicker">
			</u-datetime-picker>
			
			<u-popup :show="cshow" @close="closePoP" @open="openPoP" :customStyle="{'width':'90%'}" round="5" :closeOnClickOverlay="true" mode="center">
				<view class="popPage">
					<u-list height="295">
						<u-list-item v-for="(item,index) in coursesList.data" :key="index">
							<u-cell :title="`${index+1}.`+item.name" @click="itemCellClick(item)"></u-cell>
						</u-list-item>
					</u-list>
				</view>
			</u-popup>
			
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {  onLoad,onShow } from '@dcloudio/uni-app'
import {Date_EE} from '@/common/date.js'
import { userStore } from '@/stores/userStore'
import { bus } from '@/utils/bus'

let store = userStore();	
let { hasLogin,userData } = userStore();


let coursesList=reactive<any>({data:[]});
let pageNum=ref(1);
let pageSize=ref(30);
let totalData=ref(0);

let cshow=ref(false);
let show=ref(false);
let value1=ref('');
let showSex=ref(false);
let apply=reactive({
	id:'',
	course:'',
	name:'',
	age:'',
	phone:'',
	time:''
});

const rules=reactive({});

const showCourse=()=>{
	if(!checkLogin()){
		return false;
	}
	 cshow.value = true
}
const showTime=()=>{
	if(!checkLogin()){
		return false;
	}
	show.value = true
}
const closePicker=()=>{
	show.value=false;
}
const confirmPicker=(e:any)=>{
	console.log("确定选择:",e,Date_EE(e.value));
	apply.time=Date_EE(e.value);
	show.value=false;
}
const cancelPicker=()=>{
	closePicker();
}

const closePoP=()=>{
	cshow.value=false;
}
const openPoP=()=>{
	cshow.value=true;
}

const selectClick=(e:any)=>{
	console.log("选择课程:",e);
}

const itemCellClick=(item:any)=>{
	console.log("cell id",item.id);
	apply.course=item.name;
	apply.id=item.id;
	closePoP();
}

//读取试课课程
const getCourses=()=>{
	let paraData={}
	console.log("课程参数:",paraData);
	uni.$tools.Reqeust('/api/getCourses?pageNum='+pageNum.value+'&pageSize='+pageSize.value,paraData,'GET').then((res:any)=>{
		console.log('课程返回:==>',res);
		if (res.data.code == 200) {
			uni.hideLoading();
			totalData.value=res.data.total;
			res.data.rows.forEach(item=>{
				console.log(item);
				let obj={};
				obj.id=item.id;
				obj.name=item.coursename;
				coursesList.data.push(obj);
			});
		}
	})		
}

//页面加载
onLoad(()=>{
	//读取课程信息
	getCourses();
	bus.on("hasLoginEvent", (data) => {
	   console.log("申请试课bus事件:",data);
	   store.$state.hasLogin=true;
	   uni.setStorageSync("hasLogin",true);
	   getCourses();
	});
});
onShow(()=>{
	console.log("试课申请onShow...");
	if(uni.getStorageSync("hasLogin")!=''){
		store.$state.hasLogin=true;
		hasLogin=true;
	}
});

let uForm=ref<any>();
const checkLogin=()=>{
	if(!hasLogin){
		uni.showModal({
			title:"请登录后操作",
			showCancel:true,
			success:res=>{
				if(res.confirm){
					uni.$tools.GoUrl("/pages/login/login");
				}
			}
		})
		return false;
	}	
	return true;
}
const submitinfo=()=>{
	
	if(!checkLogin()){
		return false;
	}

	if(!/\S/.test(apply.course)){
		uni.$tools.Toast("请选择预约的课程")
		return false;
	}
	if(!/\S/.test(apply.name)){
		uni.$tools.Toast("请输入姓名")
		return false;
	}
	if(!/\S/.test(apply.age)){
		uni.$tools.Toast("请输入年龄")
		return false;
	}
	if(!/\S/.test(apply.phone)){
		uni.$tools.Toast("请输入手机号码")
		return false;
	}
	if(!uni.$u.test.mobile(apply.phone)){
		uni.$tools.Toast("手机号码格式不正确")
		return false;
	}	
	// if(!/\S/.test(apply.time)){
	// 	uni.$tools.Toast("请选择预约时间")
	// 	return false;
	// }
	console.log("提交的信息:",apply);
	let paraData={
		userid:userData.userinfo.id,
		courseid:apply.id,
		studentname:apply.name,
		studentage:apply.age,
		coursename:apply.course,
		phone:apply.phone,
		coursetime:apply.time
	}
	console.log("预约参数:",paraData);
	uni.$tools.Reqeust('/api/addapply',paraData,'POST').then((res:any)=>{
		console.log('预约返回:==>',res);
		if (res.data.code == 200) {
			uni.$tools.Toast("提交成功");
			setTimeout(()=>{
				uni.$tools.GoUrl("./success");
			},1500);
		}
	})
	return false;
}



</script>
<style>
	:deep(input){
		/* border:1px solid red; */
		width:280px !important;
	}
</style>
<style lang='scss' scoped>
	@import "coursesApply.scss";
</style>